<script setup lang="ts">
import { UserLoginDialog, UserLogoutDialog } from '#components'

const userStore = useUser()

const loginDialogRef = ref<InstanceType<typeof UserLoginDialog> | null>(null)
const logoutDialogRef = ref<InstanceType<typeof UserLogoutDialog> | null>(null)

function handleLoginDialog() {
  if (loginDialogRef.value) {
    loginDialogRef.value.loginVisible = true
  }
}

// 打开退出弹窗
function handleLogoutDialog() {
  if (logoutDialogRef.value) {
    logoutDialogRef.value.visible = true
  }
}
</script>

<template>
  <header fixed z-99 w-full bg-111425>
    <div flex="~ col items-center" max-w-screen="2xl" mx-auto w-full px-4 py-2>
      <div flex="~ justify-between items-center" pos-relative w-full pb-1.5 lg:pb-0>
        <!-- <p w-16 lg:hidden /> -->
        <!--  logo -->
        <BaseIcon
          name="logo"
          cursor-pointer
          transition-opacity
          width="8"
          height="3"
          lg:hidden
          hover:op-90
          @click="$router.push('/')"
        />
        <BaseIcon
          name="logo"
          width="12"
          height="5"
          hidden
          cursor-pointer
          transition-opacity
          lg:inline
          hover:op-90
          @click="$router.push('/')"
        />
        <!-- 搜索 -->
        <div hidden lg:inline>
          <Search w-200 />
        </div>
        <!-- 登录 -->

        <!-- 登录完成 -->
        <div v-if="userStore.isRealUser" flex="~ items-center">
          <NuxtLink to="/user">
            <NuxtImg
              hover="~ op75"
              :src="`${userStore.userInfo.topImagesUrl}`"
              w-11
              cursor-pointer
              transition
              duration-150
              lg:inline
              lg:w-13
              alt="微影院-在线电影-最新电影-免费电影-电影在线观看"
            />
          </NuxtLink>
          <div lg:flex="~ col justify-between" ml-2.5 hidden>
            <p mb-3>欢迎 {{ userStore.userInfo.userName }}</p>
            <BaseButton type="info" text="退出" round w-20 p-0.5 @click="handleLogoutDialog" />
          </div>
        </div>
        <div v-if="!userStore.isRealUser">
          <a w-16 cursor-pointer text-center text-white lg:hidden @click.prevent="handleLoginDialog"> 请登录 </a>
          <BaseButton text="登录" round hidden w-28 lg:inline @click="handleLoginDialog" />
        </div>
      </div>
      <!-- 搜索 -->
      <Search lg:hidden />
      <!-- 登陆弹窗 -->
      <UserLoginDialog ref="loginDialogRef" />
      <!-- 退出弹窗 -->
      <UserLogoutDialog ref="logoutDialogRef" />
    </div>
  </header>
</template>
